<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
                <el-breadcrumb-item>车辆评论</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="roleFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="roleFormData.clientName" placeholder="请输入用户名称"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="roleFormData.carName" placeholder="请输入车辆名称"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary"  @click="initTable">查询</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <!--<el-button type="primary" @click="add">添加</el-button>-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="#"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="clientId"
                            label="用户名"
                            v-if="show"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="clientName"
                            label="用户名"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="carid"
                            label="Carid"
                            v-if="show">
                    </el-table-column>
                    <el-table-column
                            prop="carName"
                            label="车辆名称">
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            label="评论内容">
                    </el-table-column>
                    <el-table-column
                            prop="addtime"
                            label="评论的时间">
                    </el-table-column>
                    <el-table-column
                            prop="useNum"
                            label="点长数量">
                    </el-table-column>
                    <el-table-column label="操作" width="120px" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="danger" icon="el-icon-delete" @click="del(scope.row.id)" circle></el-button>
                        </template>
                    </el-table-column >
                </el-table>
                <!--分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>
        </el-card>
    </div>
</template>

<script>
    import { regionData } from 'element-china-area-data'
    export default {
        name: "CarConfig",
        data(){
            return {
                roleFormData:{},
                tableData:[],
                currentPage:1,
                pageSize:5,
                total:0,
                show:false,
            }
        },
        created() {
            this.initTable();
        },
        methods:{
            initTable(){
                //get方式不支持json数据
                var that=this;
                this.$http.post(`/lease/comment/getComment/${this.currentPage}/${this.pageSize}`,this.roleFormData).then(function(resp){
                    that.tableData=resp.data.result.records;
                    that.total=resp.data.result.total;
                });
            },
            del(id){
                var that=this;
                var param={id:id};
                this.$http.delete("/lease/comment/delById",{params:param}).then(function (r) {
                        that.$message(r.data.message);
                        that.initTable();
                    }
                )
            },
            handleSizeChange(v){
                this.pageSize=v;
                this.initTable();
            },
            handleCurrentChange(v){
                this.currentPage=v;
                this.initTable();
            }
        }
    }
</script>

<style scoped>

</style>

